<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>pandoc-crossref demo document</title>
  <style>
    /* Default styles provided by pandoc.
    ** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
    */
    html {
      color: #1a1a1a;
      background-color: #fdfdfd;
    }
    body {
      margin: 0 auto;
      max-width: 36em;
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 50px;
      padding-bottom: 50px;
      hyphens: auto;
      overflow-wrap: break-word;
      text-rendering: optimizeLegibility;
      font-kerning: normal;
    }
    @media (max-width: 600px) {
      body {
        font-size: 0.9em;
        padding: 12px;
      }
      h1 {
        font-size: 1.8em;
      }
    }
    @media print {
      html {
        background-color: white;
      }
      body {
        background-color: transparent;
        color: black;
        font-size: 12pt;
      }
      p, h2, h3 {
        orphans: 3;
        widows: 3;
      }
      h2, h3, h4 {
        page-break-after: avoid;
      }
    }
    p {
      margin: 1em 0;
    }
    a {
      color: #1a1a1a;
    }
    a:visited {
      color: #1a1a1a;
    }
    img {
      max-width: 100%;
    }
    svg {
      height: auto;
      max-width: 100%;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-top: 1.4em;
    }
    h5, h6 {
      font-size: 1em;
      font-style: italic;
    }
    h6 {
      font-weight: normal;
    }
    ol, ul {
      padding-left: 1.7em;
      margin-top: 1em;
    }
    li > ol, li > ul {
      margin-top: 0;
    }
    blockquote {
      margin: 1em 0 1em 1.7em;
      padding-left: 1em;
      border-left: 2px solid #e6e6e6;
      color: #606060;
    }
    code {
      font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
      font-size: 85%;
      margin: 0;
      hyphens: manual;
    }
    pre {
      margin: 1em 0;
      overflow: auto;
    }
    pre code {
      padding: 0;
      overflow: visible;
      overflow-wrap: normal;
    }
    .sourceCode {
     background-color: transparent;
     overflow: visible;
    }
    hr {
      border: none;
      border-top: 1px solid #1a1a1a;
      height: 1px;
      margin: 1em 0;
    }
    table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
      overflow-x: auto;
      display: block;
      font-variant-numeric: lining-nums tabular-nums;
    }
    table caption {
      margin-bottom: 0.75em;
    }
    tbody {
      margin-top: 0.5em;
      border-top: 1px solid #1a1a1a;
      border-bottom: 1px solid #1a1a1a;
    }
    th {
      border-top: 1px solid #1a1a1a;
      padding: 0.25em 0.5em 0.25em 0.5em;
    }
    td {
      padding: 0.125em 0.5em 0.25em 0.5em;
    }
    header {
      margin-bottom: 4em;
      text-align: center;
    }
    #TOC li {
      list-style: none;
    }
    #TOC ul {
      padding-left: 1.3em;
    }
    #TOC > ul {
      padding-left: 0;
    }
    #TOC a:not(:hover) {
      text-decoration: none;
    }
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    div.columns{display: flex; gap: min(4vw, 1.5em);}
    div.column{flex: auto; overflow-x: auto;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    /* The extra [class] is a hack that increases specificity enough to
       override a similar rule in reveal.js */
    ul.task-list[class]{list-style: none;}
    ul.task-list li input[type="checkbox"] {
      font-size: inherit;
      width: 0.8em;
      margin: 0 0.8em 0.2em -1.6em;
      vertical-align: middle;
    }
    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
    /* CSS for syntax highlighting */
    html { -webkit-text-size-adjust: 100%; }
    pre > code.sourceCode { white-space: pre; position: relative; }
    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
    pre > code.sourceCode > span:empty { height: 1.2em; }
    .sourceCode { overflow: visible; }
    code.sourceCode > span { color: inherit; text-decoration: inherit; }
    div.sourceCode { margin: 1em 0; }
    pre.sourceCode { margin: 0; }
    @media screen {
    div.sourceCode { overflow: auto; }
    }
    @media print {
    pre > code.sourceCode { white-space: pre-wrap; }
    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
    }
    pre.numberSource code
      { counter-reset: source-line 0; }
    pre.numberSource code > span
      { position: relative; left: -4em; counter-increment: source-line; }
    pre.numberSource code > span > a:first-child::before
      { content: counter(source-line);
        position: relative; left: -1em; text-align: right; vertical-align: baseline;
        border: none; display: inline-block;
        -webkit-touch-callout: none; -webkit-user-select: none;
        -khtml-user-select: none; -moz-user-select: none;
        -ms-user-select: none; user-select: none;
        padding: 0 4px; width: 4em;
        color: #aaaaaa;
      }
    pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
    div.sourceCode
      {   }
    @media screen {
    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
    }
    code span.al { color: #ff0000; font-weight: bold; } /* Alert */
    code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
    code span.at { color: #7d9029; } /* Attribute */
    code span.bn { color: #40a070; } /* BaseN */
    code span.bu { color: #008000; } /* BuiltIn */
    code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #4070a0; } /* Char */
    code span.cn { color: #880000; } /* Constant */
    code span.co { color: #60a0b0; font-style: italic; } /* Comment */
    code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
    code span.do { color: #ba2121; font-style: italic; } /* Documentation */
    code span.dt { color: #902000; } /* DataType */
    code span.dv { color: #40a070; } /* DecVal */
    code span.er { color: #ff0000; font-weight: bold; } /* Error */
    code span.ex { } /* Extension */
    code span.fl { color: #40a070; } /* Float */
    code span.fu { color: #06287e; } /* Function */
    code span.im { color: #008000; font-weight: bold; } /* Import */
    code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
    code span.kw { color: #007020; font-weight: bold; } /* Keyword */
    code span.op { color: #666666; } /* Operator */
    code span.ot { color: #007020; } /* Other */
    code span.pp { color: #bc7a00; } /* Preprocessor */
    code span.sc { color: #4070a0; } /* SpecialChar */
    code span.ss { color: #bb6688; } /* SpecialString */
    code span.st { color: #4070a0; } /* String */
    code span.va { color: #19177c; } /* Variable */
    code span.vs { color: #4070a0; } /* VerbatimString */
    code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
  </style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">pandoc-crossref demo document</h1>
</header>
<p>This is a demo file for pandoc-crossref. With this filter, you can
cross-reference figures (see figs. 1.1-1.3), display equations (see
eq. 2.1), tables (see tbl. 3.1) and sections (secs. 1, 2, 4.1-4.3)</p>
<p>For immediate example, see fig. 1</p>
<figure id="fig:figure0">
<img src="img1.jpg" alt="Figure # 1: A figure" />
<figcaption aria-hidden="true">Figure # 1: A figure</figcaption>
</figure>
<p>There is also support for code blocks, for example, lsts. 4.1-4.3</p>
<p>It’s possible to capitalize reference prefixes, like this:
Fig. 1.1.</p>
<p>In case of multiple references, capitalization is determined by first
reference. Figs. 1.1, 1.2 is capitalized, while figs. 1.1, 1.2 is
not.</p>
<p>It is also possible to mix different references, like fig. 1.1,
tbl. 3.1, lsts. 4.1, 4.2, figs. 1.2, 1.3, which will be grouped in order
they are specified. You can even intermix this with regular citations,
although it’s not recommended: fig. 1.1, tbl. 3.1, <span
class="citation"
data-cites="unprocessedCitation">[@unprocessedCitation]</span></p>
<p>You can also have custom chapter reference labels, like
sec. AppA.CustLab</p>
<p>Subfigures are supported, see figs. 1.4, 1.4 (b)</p>
<h1 data-number="1" id="sec:sec1"><span
class="header-section-number">1</span> Chapter 1. Figures</h1>
<figure id="fig:figure1">
<img src="img1.jpg" alt="Figure # 1.1: First figure" />
<figcaption aria-hidden="true">Figure # 1.1: First figure</figcaption>
</figure>
<figure id="fig:figure2">
<img src="img2.jpg" alt="Figure # 1.2: Second figure" />
<figcaption aria-hidden="true">Figure # 1.2: Second figure</figcaption>
</figure>
<figure id="fig:figure3">
<img src="img3.jpg" alt="Figure # 1.3: Third figure" />
<figcaption aria-hidden="true">Figure # 1.3: Third figure</figcaption>
</figure>
<figure>
<img src="img1.jpg" alt="Unlabelled image" />
<figcaption aria-hidden="true">Unlabelled image</figcaption>
</figure>
<figure id="fig:subfigures" class="subfigures">
<figure>
<img src="img1.jpg" alt="a" />
<figcaption aria-hidden="true">a</figcaption>
</figure>
<figure id="fig:subfigureB">
<img src="img1.jpg" alt="b" />
<figcaption aria-hidden="true">b</figcaption>
</figure>
<figcaption><p>Figure # 1.4: Subfigures caption. a — Subfigure a, b —
Subfigure b</p></figcaption>
</figure>
<figure id="fig:subfigures-side-by-side" class="subfigures">
<div class="columns">
<div class="column" style="width:49.5%;">
<figure>
<img src="img1.jpg" alt="a" />
<figcaption aria-hidden="true">a</figcaption>
</figure>
</div><div class="column" style="width:49.5%;">
<figure>
<img src="img2.jpg" alt="b" />
<figcaption aria-hidden="true">b</figcaption>
</figure>
</div>
</div>
<figure>
<img src="img3.jpg" alt="c" />
<figcaption aria-hidden="true">c</figcaption>
</figure>
<figcaption><p>Figure # 1.5: Subfigures side by side. a — Subfigure a, b
— Subfigure b, c — Subfigure c</p></figcaption>
</figure>
<h1 data-number="2" id="sec:sec2"><span
class="header-section-number">2</span> Chapter 2. Equations</h1>
<p>Display equations are labelled and numbered</p>
<p><span id="eq:eqn1"><span
class="math display"><em>P</em><sub><em>i</em></sub>(<em>x</em>) = ∑<sub><em>i</em></sub><em>a</em><sub><em>i</em></sub><em>x</em><sup><em>i</em></sup>   (2.1)</span></span></p>
<p>Since 0.1.6.0 those can also appear in the middle of paragraph <span
id="eq:quadr"><span
class="math display"><em>a</em><em>x</em><sup>2</sup> + <em>b</em><em>x</em><sup>2</sup> + <em>c</em> = 0   (2.2)</span></span>
like this.</p>
<h1 data-number="3" id="sec:chapter-3.-tables"><span
class="header-section-number">3</span> Chapter 3. Tables</h1>
<div id="tbl:table1">
<table>
<caption><em>Table 3.1</em>: Table example</caption>
<thead>
<tr>
<th style="text-align: left;">First Header</th>
<th style="text-align: left;">Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">Content Cell</td>
<td style="text-align: left;">Content Cell</td>
</tr>
<tr>
<td style="text-align: left;">Content Cell</td>
<td style="text-align: left;">Content Cell</td>
</tr>
</tbody>
</table>
</div>
<p>Table without caption:</p>
<table>
<thead>
<tr>
<th style="text-align: left;">First Header</th>
<th style="text-align: left;">Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">Content Cell</td>
<td style="text-align: left;">Content Cell</td>
</tr>
<tr>
<td style="text-align: left;">Content Cell</td>
<td style="text-align: left;">Content Cell</td>
</tr>
</tbody>
</table>
<h1 data-number="4" id="sec:chapter-4.-code-blocks"><span
class="header-section-number">4</span> Chapter 4. Code blocks</h1>
<p>There are a couple options for code block labels. Those work only if
code block id starts with <code>lst:</code>,
e.g. <code>{#lst:label}</code></p>
<h2 data-number="4.1" id="sec:caption-attr"><span
class="header-section-number">4.1</span> <code>caption</code>
attribute</h2>
<p><code>caption</code> attribute will be treated as code block caption.
If code block has both id and <code>caption</code> attributes, it will
be treated as numbered code block.</p>
<div id="lst:captionAttr" class="listing haskell">
<p>Listing 4.1: Listing caption</p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode haskell"><code class="sourceCode haskell"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ot">main ::</span> <span class="dt">IO</span> ()</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>main <span class="ot">=</span> <span class="fu">putStrLn</span> <span class="st">&quot;Hello World!&quot;</span></span></code></pre></div>
</div>
<h2 data-number="4.2" id="sec:table-capts"><span
class="header-section-number">4.2</span> Table-style captions</h2>
<p>Enabled with <code>codeBlockCaptions</code> metadata option. If code
block is immediately adjacent to paragraph, starting with
<code>Listing:</code> or <code>:</code>, said paragraph will be treated
as code block caption.</p>
<div id="lst:tableCaption" class="listing haskell">
<p>Listing 4.2: Listing caption</p>
<div class="sourceCode" id="cb2"><pre
class="sourceCode haskell"><code class="sourceCode haskell"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="ot">main ::</span> <span class="dt">IO</span> ()</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>main <span class="ot">=</span> <span class="fu">putStrLn</span> <span class="st">&quot;Hello World!&quot;</span></span></code></pre></div>
</div>
<h2 data-number="4.3" id="sec:wrapping-div"><span
class="header-section-number">4.3</span> Wrapping div</h2>
<p>Wrapping code block without label in a div with id
<code>lst:...</code> and class, starting with <code>listing</code>, and
adding paragraph before code block, but inside div, will treat said
paragraph as code block caption.</p>
<div id="lst:wrappingDiv" class="listing haskell">
<p>Listing 4.3: Listing caption</p>
<div class="sourceCode" id="cb3"><pre
class="sourceCode haskell"><code class="sourceCode haskell"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ot">main ::</span> <span class="dt">IO</span> ()</span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a>main <span class="ot">=</span> <span class="fu">putStrLn</span> <span class="st">&quot;Hello World!&quot;</span></span></code></pre></div>
</div>
<h1 class="unnumbered" id="sec:unnumbered-chapter.">Unnumbered
chapter.</h1>
<p>This chapter doesn’t change chapter prefix of referenced elements,
instead keeping number of previous chapter, e.g. <span
id="eq:eqn2"><span
class="math display"><em>S</em>(<em>x</em>) = ∫<sub><em>x</em><sub>1</sub></sub><sup><em>x</em><sub>2</sub></sup><em>a</em><em>x</em> + <em>b</em> d<em>x</em>   (4.1)</span></span></p>
<h1 data-number="5" id="sec:chapter-5.-reference-lists"><span
class="header-section-number">5</span> Chapter 5. Reference lists</h1>
<p>It’s also possible to show lists of figures and tables, like
this:</p>
<h2 data-number="5.1" id="list-of-figures"><span
class="header-section-number">5.1</span> List of Figures</h2>
<div class="list list-of-fig">
1. A figure<br />

1.1. First figure<br />

1.2. Second figure<br />

1.3. Third figure<br />

1.4. Subfigures caption<br />

1.4 (a). Subfigure a<br />

1.4 (b). Subfigure b<br />

1.5. Subfigures side by side<br />

1.5 (a). Subfigure a<br />

1.5 (b). Subfigure b<br />

1.5 (c). Subfigure c<br />

</div>
<h2 data-number="5.2" id="list-of-tables"><span
class="header-section-number">5.2</span> List of Tables</h2>
<div class="list list-of-tbl">
3.1. Table example<br />

</div>
<h2 data-number="5.3" id="list-of-listings"><span
class="header-section-number">5.3</span> List of Listings</h2>
<div class="list list-of-lst">
4.1. Listing caption<br />

4.2. Listing caption<br />

4.3. Listing caption<br />

</div>
<h1 data-number="6" data-label="AppA"
id="sec:appendix-a.-custom-labels"><span
class="header-section-number">6</span> Appendix A. Custom labels</h1>
<h2 data-number="6.1" data-label="CustLab" id="sec:custlabs"><span
class="header-section-number">6.1</span> This section will have custom
label</h2>
</body>
</html>
